// uno.config.js
import {
  defineConfig,
  presetAttributify,
  presetMini,
  transformerVariantGroup,
  transformerDirectives
} from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  presets: [
    presetAttributify(),
    // rem 转 px
    //baseFontSize默认16  改成4后 1rem = 4px  这样 项目里面的 1=1px
    presetRemToPx({
      baseFontSize: 4
    }),
    presetMini // 这是最简便的预设，必须添加；否则不会生效
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()], //transformerDirectives支持taiwindcss 语法
  theme: {
    // 配置主题色
    colors: {
      primary: '#ffffff'
    },
    backgroundColor: {
      'bg-color': '#ffffff'
    }
  },
  rules: [],
  //自定义属性 ,一个属性可以添加多个值
  shortcuts: [
    {
      //垂直水平居中
      'flex-center': 'flex items-center justify-center',
      //放在最后
      'flex-end': 'flex justify-end',
      //垂直居中
      'flex-middle': 'flex items-center',
      //两边分开
      'flex-between': 'flex items-center justify-between',
      //竖着居中
      'flex-col-center': 'flex flex-col  justify-center'
    }
  ]
})
